<template>
    <!-- dialog的显示与否是通过 :visible.sync的值来控制的 -->
    <el-dialog title="添加菜单" :visible.sync="editMenuListDialogVisible" width="50%" :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="editForm">
      <el-form-item label="数据类型">
        <el-radio-group v-model="form.radio">
        <el-radio label="1" v-model="form.radio">目录</el-radio>
        <el-radio label="2" v-model="form.radio">菜单</el-radio>
        <el-radio label="3" v-model="form.radio">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
    
      <div v-show="form.radio =='1'" >
      <el-form-item label="目录标题" prop="title">
        <el-input v-model="form.title" placeholder="中文,例:系统管理"></el-input>
      </el-form-item>
      <el-form-item label="目录标识" prop="perms">
        <el-input v-model="form.perms" placeholder="英文:例:SystemManager"></el-input>
      </el-form-item>
      <el-form-item label="目录路径" prop="path">
        <el-input v-model="form.path" placeholder="例:/sys"></el-input>
      </el-form-item>
      <el-form-item label="排序编号" prop="num">
      <el-input-number v-model="form.num" controls-position="right" @change="handleChange" :min="0" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="目录图标" prop="icon">
        <el-input v-model="form.icon" placeholder="例:el-icon-top"></el-input>
      </el-form-item> 
    </div>
    
    
    <div v-show="form.radio =='2'" >
      <el-form-item label="菜单标题" prop="title">
        <el-input v-model="form.title" placeholder="中文,例:用户管理"></el-input>
      </el-form-item>
      <el-form-item label="菜单标识" prop="perms">
        <el-input v-model="form.perms" placeholder="英文:例:user"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单" prop="parentId">
        <el-input v-model="form.parentId" placeholder="例:系统监控"></el-input>
      </el-form-item>
      <el-form-item label-width="45" label="是否隐藏菜单">
        <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </el-form-item>
      <el-form-item label="菜单路由" prop="path">
        <el-input v-model="form.path" placeholder="例:/sys/user"></el-input>
      </el-form-item>
      <el-form-item label="排序编号" prop="orderNum">
      <el-input-number v-model="form.orderNum" controls-position="right" @change="handleChange" :min="0" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="菜单图标" prop="icon">
        <el-input v-model="form.icon" placeholder="例:el-icon-top"></el-input>
      </el-form-item>
    </div>
    
    <div v-show="form.radio =='3'" >
      <el-form-item label="按钮名称" prop="type">
        <el-input v-model="form.type" placeholder="中文,例:编辑"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单" prop="name">
        <el-input v-model="form.name" placeholder="中文,例:系统管理/机构管理"></el-input>
      </el-form-item>
      <el-form-item label="授权标识" prop="perms">
        <el-input v-model="form.perms" placeholder="例:sys:dept:add"></el-input>
      </el-form-item>
    </div>
    </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="() => editMenuListDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureEdit">确 定</el-button>
      </span>
    </el-dialog>
    </template>
    
    <script>
// import axios from 'axios'
import http from '@/utils/request.js'

    export default {
        data(){
            return{
                
                editMenuListDialogVisible:false,//dialog表单默认隐藏
                radio: '1',
                value:true,//switch开关的默认状态//单选框的默认状态
                num: 0,//排序的默认状态
                form: {
                    
                },
                // 定义校验规则
            rules: {
                title: [
                    // required表示该值必须要填；message 表示违反规则的提示信息；trigger表示何时出发
                    { required: false, trigger: 'blur' }
                ],
                name: [
                    { required: false, trigger: 'blur' }
                    /**
                     * ^: 表示以X开头
                     * \w: a-zA-Z_0-9
                     * []: 表示中间的内容任选一个
                     * [-\w]{2,7}: 表示数字、字母、_、-出现的次数在2到7之间
                     * \.: 表示 “.” 的意思
                     * \d: 表示数字
                     * $: 表示必须以这些内容结尾
                     */
                    // { pattern: /^\w[-\w]{2,7}@[0-9A-Za-z]{2,6}\.[\dA-Za-z]{2,6}$/, 
                    //     message: '邮件不符合规则', trigger: 'blur'}
                ],
                path: [
                    { required: false, trigger: 'blur' },
                ],
                icon: [
                    { required: false, trigger: 'blur' },
                ]
            }
            }
        },
        methods: {
          getById(id) {
            http.get(`menu-list/${id}`).then(res => {
                // res.data 就是用户数据
                this.form = res
                // for (let index = 0; index < res.sysDept.length; index++) {
                //     this.editUser.roleId.push(res.sysDept[index].id)
                // }
            }) 
        },
        // 用户确认编辑
        async sureEdit() {
            try {
                // 通过await的方式校验表单的时候，如果校验不通过，this.$refs.editForm.validate()
                // 会抛出异常
                // await this.$refs.editForm.validate()
                // // this.editUser.deptId = this.editUser.deptId.reverse()[0]
                // // 代码如果能走下来，表示校验通过
                // await http.put(`menu-list`, this.form)
                // // 编辑成功的提示消息
                // this.$message({ message: '编辑成功', type: 'success', duration: 1000})
                // 隐藏模态框

                this.editMenuListDialogVisible = false

                // 重新查询数据
                this.$emit('refresh')
            }catch(err) {
                console.log(err);
            }
        },
          // addmenulist(){
          //   this.$refs.addDialog.
          // },
          handleChange(value) {
            console.log(value);
          },
          handleClose(done) {
            this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {});
            },
          
        },
        
    
    }
    </script>
    
    <style>
    
    </style>
    